<template>
	<div class="animate-positiona">
		<div class="carEditorSubmit">
			<button type="submit" form="formReserce" class="submits">确定</button>
		</div>
		<div class="page has-navbar has-tabbar" v-nav="{title: '跟进意向', showBackButton: true}">
			<div class="page-content padding-top" style="margin-bottom: 0">
				<div class="car-editor" ref="carEditor">
					<form id="formReserce" @submit.prevent="submit" >
						<div class="reserve">
							<ul>
								<li>
									<list>
										<item>
											<div class="car-enitor-tr" @click="followStateFn" >
												<div class="car-editor-name">跟进结果</div>
												<div class="car-editor-input">
													<input type="text" readonly placeholder="请选择跟进结果" v-model="followText" name="followResult">
													<input type="text" class="none" v-model="followState" name="followState">
												</div>
												<div class="car-editor-right"><i class="ion-ios-arrow-right"></i></div>
											</div>
										</item>						
									</list>
									<list v-if="followState==30">
										<item>
											<div class="car-enitor-tr active" >
												<div class="car-editor-name">战败日期</div>
												<div class="car-editor-input" style="width:200px">
													<input type="date" style="width: 100%" required name="loseEfficacyTime" placeholder="请选择战败日期" >
												</div>
											</div>
										</item>
									</list>
									<list v-if="followState==40">
										<item>
											<div class="car-enitor-tr active" >
												<div class="car-editor-name">失效日期</div>
												<div class="car-editor-input" style="width:200px">
													<input type="date" name="loseEfficacyTime" required style="width:200px" placeholder="请选择失效日期" >
												</div>
											</div>
										</item>
									</list>
									<list v-if="followState==50">
										<item>
											<div class="car-enitor-tr active" >
												<div class="car-editor-name">成交日期</div>
												<div class="car-editor-input" style="width:200px">
													<input type="date" style="width:200px" required name="fixtureTime" placeholder="请选择失效日期" >
												</div>
											</div>
										</item>
										<item>
											<div class="car-enitor-tr active" @click="carlistShow=true" >
												<div class="car-editor-name">成交车辆</div>
												<div class="car-editor-input">
													<input type="text" required readonly placeholder="请选择成交车辆" v-model="carParams.carTitle" >
													<input type="text" required readonly class="none" v-model="carParams.carImageUrl" name="fixtureCarPic"   >
													<input type="text" required readonly class="none" v-model="carParams.carId" name="carId" >
												</div>
											</div>
										</item>
										<item>
											<div class="car-enitor-tr active" >
												<div class="car-editor-name">定金</div>
												<div class="car-editor-input">
													<input type="number"  step="0.01" required name="earnest" placeholder="请输入定金" >
												</div>
											</div>
										</item>
										<item>
											<div class="car-enitor-tr active" >
												<div class="car-editor-name">成交价格</div>
												<div class="car-editor-input">
													<input type="number" required step="0.01" name="fixturePrice" placeholder="请输入价格" >
												</div>
											</div>
										</item>
									</list>
									<list v-if="followState==10">
										<item>
											<div class="car-enitor-tr"  @click="customerLevelFn(1)">
												<div class="car-editor-name">客户等级</div>
												<div class="car-editor-input">
													<input type="text" placeholder="客户等级" v-model="res.levelTxt" name="levelTxt" readonly >
													<input type="text" v-model="res.levelId" class="none" name="levelId" />
												</div>
												<div class="car-editor-right"><i class="ion-ios-arrow-right"></i></div>
											</div> 
										</item>
										<item>
											<div class="car-enitor-tr active" >
												<div class="car-editor-name">下次跟进</div>
												<div class="car-editor-input" style="width:200px">
													<input type="date" style="width:200px" required name="nextFollowTime" placeholder="下次跟进日期" >
												</div>
											</div>
										</item>
										<item>
											<div class="car-enitor-tr">
												<div class="car-editor-name">是否到店</div>
												<div class="car-editor-input">
													<div class="car-editor-radio">
														<input type="radio" name="isReach" v-model="whethet" value="1" id="nan">
														<label for="nan">是</label>
														<input type="radio" name="isReach" v-model="whethet" value="2" id="nv" />
														<label for="nv">否</label>
													</div>
												</div>
											</div>
										</item>
									</list>
									<list v-if="followState==20">
										<item>
											<div class="car-enitor-tr "  @click="customerLevelFn(2)">
												<div class="car-editor-name">客户等级</div>
												<div class="car-editor-input">
													<input type="text" placeholder="客户等级" v-model="res2.levelTxt" name="customerLevelTxt" readonly >
													<input type="text" v-model="res2.levelId" class="none" name="customerLevel" />
												</div>
												<div class="car-editor-right"><i class="ion-ios-arrow-right"></i></div>
											</div> 
										</item>
										<item>
											<div class="car-enitor-tr active" >
												<div class="car-editor-name">预约时间</div>
												<div class="car-editor-input" style="width:200px">
													<input type="date" style="width:200px" required name="appointmentTime" placeholder="请选择预约时间" >
												</div>
											</div>
										</item>
										<item>
											<div class="car-enitor-tr">
												<div class="car-editor-name">是否到店</div>
												<div class="car-editor-input">
													<div class="car-editor-radio">
														<input type="radio" name="isReach" v-model="whethet" value="1" id="nan">
														<label for="nan">是</label>
														<input type="radio" name="isReach" v-model="whethet" value="2" id="nv" />
														<label for="nv">否</label>
													</div>
												</div>
											</div>
										</item>
									</list>

									<list>
										<item>
											<div class="car-enitor-tr " >
												<div class="car-editor-name">备注</div>
												<div class="car-editor-textarea">
													<textarea  :class="{on:followRemark.length>50}" name="followRemark" v-model="followRemark"  placeholder="请输入备注信息"  ></textarea>
													<span class="span">{{followRemark.length}}/50</span>
												</div>
											</div> 
										</item>
									</list>
								</li>
							</ul>
							<input type="text"  v-model="userSession.userName" name="followName" class="none" >
							<input type="text"  v-model="customerShopId" name="customerShopId" class="none" >
						</div>
					</form>
				</div>
			</div>
		</div>
		<transition-group enter-active-class="animated fadeIn" leave-active-class="animated fadeOut" >
			<modal :paramsIs="paramsIs" v-for="(item,index) in paramsIs" :key="(index)" :itemIndex="index" />
		</transition-group>
		<carlist v-if="carlistShow" :params="params" @carCancel="carCancel" />
	</div>
</template>

<script>
	import carlist from 'src/assembly/carList.vue'
	import modal from 'src/assembly/modalList.vue'
	import {bus} from 'bus.js'
	export default{
		data(){
			return{
				show:false,
				res:{},
				res2:{},
				textareaNotice:false,
				remarkLength:0,
				followText:'',
				cusLevelRes:[],
				whethet:'1',
				customerShopId:'',
				followRemark:'',
				follow:[
					{
						name:'继续跟进',
						id:10
					},
					{
						name:'预约到店',
						id:20
					},
					{
						name:'已战败',
						id:30
					},
					{
						name:'已失效',
						id:40
					},
					{
						name:'已成交',
						id:50
					},
				],
				followState:'',
				paramsIs:[],
				cusLeveNum:'',
				carlistShow:false,
				params:{},
				carParams:{}
			}
		},
		components:{
			modal,
			carlist
		},
		computed: {
			userSession() {
				return sess.get('userSession')
			},
		},
		methods:{
			carCancel(val){
				this.carlistShow = false
				if(val){
					this.carParams = val
				}
			},
			customerLevelFn(val){
				this.cusLeveNum = val
				if(this.cusLevelRes.length > 0) {
					this.cusLevelModal()
				} else {
					window.axios.get(baseUrl + '/crm-web/controller/sysParam/customerLevel-list',{params:{marketId:sess.get('userSession').marketId,shopId:sess.get('userSession').shopId,levelState:1}}).then((res) => {
						// console.log(res)
						this.cusLevelRes = []
						for(let i of res.data.result) {
							this.cusLevelRes.push({
								name: i.levelTxt,
								id: i.levelId
							})
						}
						//						console.log(this.paramsIs)
						this.cusLevelModal()
					})
				}
			},
			cusLevelModal() {
				this.paramsIs.push({
					list: this.cusLevelRes,
					title: '客户级别',
					emit: 'cusLevelModal',
				})
			},
			busOn(){
				bus.$off('followStateEmit')
				bus.$off('cusLevelModal')
				bus.$on('followStateEmit',(index)=>{
					this.followState = this.paramsIs[0].list[index].id
					this.followText = this.paramsIs[0].list[index].name
					this.paramsIs=[]
				})
				bus.$on('cusLevelModal',(index)=>{
					if(this.cusLeveNum == 1){
					this.res.levelId = this.paramsIs[0].list[index].id
					this.res.levelTxt = this.paramsIs[0].list[index].name
				}else if(this.cusLeveNum == 2){
					this.res2.levelId = this.paramsIs[0].list[index].id
					this.res2.levelTxt = this.paramsIs[0].list[index].name
				}
				this.paramsIs=[]
				})
			},
			followStateFn(){
				this.paramsIs.push({
					list:this.follow,
					emit:'followStateEmit',
					title:'跟进结果'
				})
			},
			submit(event){
				if(!this.followState){
					$toast.show('请选择跟进结果')
					return
				}
				if(this.followRemark.length>50){
					$toast.show('备注长度不超过50')
					return
				}				
				if(this.followState==50&&!this.carParams.carId){
					$toast.show('请选择成交车辆')
					return
				}
				
				var formData = new FormData(event.target);
				window.axios.post(baseUrl+'/crm-web/controller/customer/insertFollowInfo',formData).then((res)=>{
					if(res){						
						this.$store.commit('screenToInfoFollowChange',this.followState)
						setTimeout(()=>{
							window.$toast.show('跟进意向成功',1000)
							setTimeout(()=>{
								this.$router.go(-1)
							},1000)
						},500)
					}
				})
			}
		},
		created(){
			this.busOn()
		},
		mounted(){
			this.followState = ''
			this.followText = ''
			if(this.$route.query.params){
				this.customerShopId = this.$route.query.params.customerShopId
				this.params = this.$route.query.params
			}
			this.carParams = {}
		},
	
	}
</script>